<template>
  <Modal
    v-bind="$attrs"
    :before-change="useBeforeChange"
    :model="fields"
    :rules="rules"
  >
    <a-form
      ref="formRef"
      :label-col="{ style: { width: '170px' } }"
      :wrapper-col="{ span: 24 }"
      :model="fields"
      :rules="rules"
    >
      <!-- 密码组件 -->
      <a-form-item label="教师端账号的密码" prop="password">
        <a-input-password
          v-model:value="fields.password"
          :placeholder="PAW_PLACEHOLDER"
        />
      </a-form-item>
    </a-form>
  </Modal>
</template>
<script lang="ts" setup>
import { ref, Ref, reactive } from "vue";
import type { FormInstance } from "ant-design-vue";
import Modal from "@/components/modal/index.vue";
import Password from "@/components/password/index.vue";
import { usePassword } from "./use-password";
import { PAW_PLACEHOLDER } from "@/constant/index";
//ref
const formRef = ref<FormInstance>();
const { useBeforeChange, fields, rules } = usePassword(formRef);
</script>
